<template>
	<div>
		<Row type="flex" justify="end" class="code-row-bg" :gutter="16">
			<Col span="3">
			<Select v-model="searchForm.status" filterable placeholder="状态">
				<Option value="" key="">全部</Option>
				<Option :value="1" :key="1">待审核 </Option>
				<Option :value="2" :key="2">已通过 </Option>
				<Option :value="-1" :key="-1">拒绝 </Option>
			</Select>
			</Col>
			<Col span="2">
			<Button type="primary" icon="ios-search" @click="getTableDataExcute(1)">搜索</Button>
			</Col>
			<!--<Col span="2">
			<Button type="success" icon="plus" @click="addBtn()">添加</Button>
			</Col>-->
		</Row>
		<br>

		<Row>
			<div class="demo-spin-container" v-if="tableLoading">
				<Spin fix>
					<Icon type="load-c" size=18 class="spin-icon-load"></Icon>
					<div>加载中...</div>
				</Spin>
			</div>
			<Table border :columns="columns" :data="feeds.data" @on-sort-change='onSortChange'></Table>
			<div style="margin: 10px;overflow: hidden">
				<div style="float: right;">
					<Page :total="feeds.record_count" :current="feeds.page_current" :page-size="feeds.page_size" class="paging" show-elevator show-total show-sizer @on-change="handleOnPageChange" @on-page-size-change='onPageSizeChange'></Page>
				</div>
			</div>
		</Row>

		<Drawer title="担保函" v-model="tpl.show" width="40%" :mask-closable="true">

			<Card :bordered="true">
				<div v-html="tpl.formData.tpl"></div>
			</Card>
		</Drawer>

		<info-component v-if='editModal.show === true' :modal-id='editModal.id' @on-edit-modal-success='getTableDataExcute(1)' @on-edit-modal-hide="editModalHide"> </info-component>

	</div>
</template>

<script>
	import InfoComponent from './components/info-papply'
	import {
		getTableData,
		getTpl,
		getData
	} from '@/api/papply'

	export default {
		components: {
			InfoComponent,
		},
		data() {
			return {
				tpl: {
					show: false,
					formData: {
						tpl: ''
					}
				},
				getSearchData: {
					status: []
				},
				searchForm: {
					status: ''
				},
				tableLoading: false,
				tableStatus: {
					enable: []
				},
				feeds: {
					data: [],
					record_count: 0,
					page_current: 1,
					page_size: 10
				},
				addModal: {
					show: false
				},
				editModal: {
					show: false,
					id: 0
				},
				columns: [{
						title: 'ID',
						key: 'a_relation_id',
						sortable: true,
						width: 100
					},
					{
						title: '申请会员',
						key: 'realname'
					},
					{
						title: '申请平台',
						key: 'c_realname'
					},
					{
						title: '担保金额',
						key: 'price'
					},
					{
						title: '担保状态',
						key: 'status_text'
					},
					{
						title: '申请日期',
						key: 'create_time'
					},
					{
						title: '操作',
						render: (h, params) => {
							let t = this;
							return h('div', [
								h('Button', {
									props: {
										type: 'success',
										size: 'small'
									},
									on: {
										click: () => {
											this.editModal.show = true
											//console.log(params.row.a_relation_id);
											this.editModal.id = params.row.a_relation_id
										}
									}

								}, '查看'),
								h('Button', {
									props: {
										type: 'primary',
										size: 'small'
									},
									style: {
										marginLeft: '5px'
									},
									on: {
										click: () => {
											this.tpl.show = true
											this.getTplExcute(params.row.a_relation_id);

										}
									}

								}, '担保函'),

							])
						}
					},
				]
			}
		},
		created() {
			let t = this
			t.getTableDataExcute(t.feeds.page_current);
		},
		methods: {
			handleOnPageChange: function(page_current) {
				this.getTableDataExcute(page_current)
			},
			onPageSizeChange: function(page_size) {
				this.feeds.page_size = page_size
				this.getTableDataExcute(1)
			},
			getTableDataExcute(page_current) {
				let t = this
				t.tableLoading = true
				t.feeds.page_current = page_current
				if(t.searchForm.status == 2) {
					t.searchForm.status = '2,3';
				}
				getTableData(page_current, t.feeds.page_size, t.searchForm).then(res => {
					if(res.data.code == 1) {
						t.feeds.data = res.data.data.list
						//					console.log(t.feeds.data);
						t.feeds.record_count = res.data.data.record_count
						t.tableLoading = false
					} else {
						t.$Notice.error({
							title: res.data.msg
						})
						t.tableLoading = false
					}

				}, function(error) {
					t.tableLoading = false
				})
			},
			onSortChange: function(data) {

			},
			addModalHide() {
				this.addModal.show = false
			},
			editModalHide() {
				this.editModal.show = false
			},
			getTplExcute(a_relation_id) {
				let t = this;
				getTpl(a_relation_id).then(res => {
					if(res.data.code == 1) {
						t.tpl.formData.tpl = res.data.data.tpl;
					}

				}, function(error) {
					t.tableLoading = false
				})
			}
		}
	}
</script>